<template>
  <div class="ditchBox pageWrapper">
    <Loading :loading="loading">
      <Form :ref="formRef" :label-width="130" :model="formData" inline>
        <Card :bordered="true">
          <div slot="title" style="color: rgb(45, 140, 240);font-size: 16px;font-weight: 500;">
            <span>商户基本信息</span>
            <span v-if="!formDataList || formDataList.filter(item=>item.used==='1'||item.used===1).length<1" style="color: red;font-size: 13px">（ *未配置默认支付渠道 ）</span>
          </div>
        <FormItem label="所属机构:" style="width:45%">
          <div>{{ formData.organizationName }}</div>
        </FormItem>
        <FormItem label="商户编码:" style="width:45%">
          <div>{{formData.merchantCode}}</div>
        </FormItem>
        <FormItem label="商户名称:" style="width:45%">
          <div>{{formData.merchantName}}</div>
        </FormItem>
        <FormItem label="开户名:" style="width:45%">
          <div>{{formData.accountName}}</div>
        </FormItem>
        <FormItem label="开户行:" style="width:45%">
          <div>{{formData.openingBank}}</div>
        </FormItem>
        <FormItem label="开户行行号:" style="width:45%">
          <div>{{formData.bankCode}}</div>
        </FormItem>
        <FormItem label="账号:" style="width:45%">
          <div>{{formData.accountNo}}</div>
        </FormItem>
        <FormItem label="结算账户类型:" style="width:45%">
          <div>{{formData.accountTypeName}}</div>
        </FormItem>
        <FormItem label="城市:" style="width:45%">
          <div>{{ formData.cityName }}</div>
        </FormItem>
        <!-- <FormItem label="合同有效时间:" style="width:45%">
          <div>{{formData.contractStartDate}}</div>
        </FormItem> -->

        <FormItem label="备注:" style="width:50%">
          <div>{{formData.remark}}</div>
        </FormItem>
        <FormItem label="收入确认:" style="width:45%">
          <div>{{formData.revenueTypeName}}</div>
        </FormItem>
          <FormItem label="结算类型:" style="width:45%">
            <div>{{getSettleType(formData.settlementType)}}</div>
          </FormItem>
        </Card>

        <Card :bordered="true">
          <p slot="title" style="color: rgb(45, 140, 240);font-size: 16px;font-weight: 500;">支付渠道信息</p>
        <div v-for="(item) in formDataList" :key="item.id" >

          <Divider style="color: #2d8cf0;text-align: center" dashed orientation="left">{{ item.paymentChannelName }}
            <Badge>
              <span style="font-size: 13px;padding-left: 10px;color: rgb(81, 90, 110)">默认支付渠道:</span>
              <Icon v-if="item.used===1||item.used==='1'" type="md-checkmark-circle" color="rgb(25, 190, 107)" size="20"  />
              <Icon v-else type="md-close-circle" color="red" size="20"  />
            </Badge>

          </Divider>

          <FormItem label="支付渠道子商户号:" style="width:30%">
            <div>{{item.subMchId}}</div>
          </FormItem>
          <FormItem label="收单机构商户号:" style="width:30%">
            <div>{{item.merchantCodeAcquirer}}</div>
          </FormItem>
          <FormItem label="平台服务费:" style="width:30%">
            <div>{{item.merchantSlottingFees}}%</div>
          </FormItem>
          <FormItem label="平台通道费:" style="width:30%">
            <div>{{item.platformSlottingFees}}%</div>
          </FormItem>
          <FormItem label="业务侧商户编码:" style="width:30%">
            <div class="codeLang">{{item.merchantCodeBusiness}}</div>
          </FormItem>
          <FormItem label="渠道进件号:" style="width:30%">
            <div>{{item.subAppid}}</div>
          </FormItem>
          <FormItem label="企业用户号:" style="width:30%" v-if="item.paymentChannelCode === 'ums'">
            <div>{{item.enterpriseCode}}</div>
          </FormItem>

        </div>
        </Card>

        <Card :bordered="true">
          <p slot="title" style="color: rgb(45, 140, 240);font-size: 16px;font-weight: 500;">商户清分规则</p>
          <div v-for="(item) in merchantSettleRules" :key="item.id" >
            <FormItem label="规则编码:" style="width:100%">
              <div><a @click="gotoRuleListPage(item.ruleCode)">{{item.ruleCode}}</a></div>
            </FormItem>
            <FormItem label="清分周期:" style="width:30%">
              <div>{{`${item.cycleType}+${item.cycleValue}`}}</div>
            </FormItem>
            <FormItem label="状态:" style="width:30%">
              <Tag color="success" v-if="item.ruleStatus === 1">有效</Tag>
              <Tag color="success" v-else>无效</Tag>
            </FormItem>
            <FormItem label="平台分佣:" style="width:30%">
              <div>{{`${item.platformPercent} %`}}</div>
            </FormItem>
            <FormItem label="添加时间:" style="width:100%">
              <div>{{item.createdDt}}</div>
            </FormItem>
          </div>
        </Card>
      </Form>
      <Button type="primary" @click="goBack" style="margin-bottom: 10px">返回</Button>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../module/commercial";
import {queryMerchantSettleRuleList} from '@/api/statement';
import {
  InputNumber,
  Input,
  Button,
  Select,
  Form,
  FormItem,
  Message,
  Option,
  DatePicker,
  Tag
} from "view-design";
import Loading from "@/components/Loading";
import RemoteSelect from "@/components/RemoteSelect";
import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
export default {
  components: {
    InputNumber,
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message,
    RemoteSelect,
    RemoteTableSelect,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    Select,
    Option,
    Authc,
    DatePicker,
    Tag
  },
  props: ["id"],
  beforeMount: async function() {
    let id = this.$route.query.id;
    let response = await this.$store.dispatch(`${namespace}/getDetail`, id);
    if (response.errorCode === 0) {
      this.formData = response.data;
      this.formDataList = response.data.channelList
      const rulePages =await queryMerchantSettleRuleList({
        merchantCode:response.data.merchantCode,
        ruleStatus:1,
        currentPage:1,
        pageSize:50,
      })
      if(rulePages && rulePages.data.ret===0){
        this.merchantSettleRules=rulePages.data.data.list||[]
      }
    }
  },
  data: function() {
    let vm = this;
    return {
      taxpayerId: this.$route.params.id,
      formRef: Uuid.v1(),
      formData: {},
      formDataList: [],
      columns: [],
      oNameSelect: [],
      merchantSettleRules:[],// 商户清分规则
      settlementTypes:[{key:'1',value:'清分'},{key:'2',value:'自营'},{key:'3',value:'平台'}],//结算类型
    };
  },
  created () {
    this.getInstitutionName();
    this.getSelect();
  },
  methods: {
    gotoRuleListPage(ruleCode){
      this.$router.push({path: 'merchantSettleRule', query: {
          ruleCode: ruleCode
        }})
    },
    // 组织机构下拉
    getInstitutionName () {
      this.$store.dispatch(`${namespace}/getInstitutionName`).then((res)=>{
        if (res.data.errorCode === 0) {
            let data = res.data.data.list.map(({organizationCode, organizationName}) => {
              return {
                label: organizationName,
                value: organizationCode
              }
            });
            this.oNameSelect = data
          }
      })
    },
    getSettleType(settlementType){
      if(!settlementType){
        return '无'
      }
      const select=this.settlementTypes.filter(item=>item.key===settlementType)
      if(select && select.length){
        return select[0].value
      }
      return '未知'
    },
    // 字典
    getSelect () {
      this.$store.dispatch(`${namespace}/getMerchantSearchKey`).then((res)=>{
        if (res.data.errorCode === 0) {
          let data = res.data.data;
          this.selectChannel = data.merchantPaymentChannel; // 渠道
          this.selectScenario = data.merchantScenario; // 场景
          this.selectAccount = data.merchantAccountType; // 结算账户类型
        }
      })
    },
    goBack () {
      this.$router.go(-1)
    }
  },
  computed: {
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  }
};
</script>

<style lang="less">
.ditchBox {
  .title{
    padding-bottom: 8px;
    border-bottom: 1px solid #999;
  }
  .titleDetele {
    padding-bottom: 8px;
  }
  .codeLang {
    word-wrap:break-word;
    word-break:break-all;
  }
  .title_border {
    border-top: 1px solid #999;
  }
}
</style>
